Skip to main content

懒加载 demo

<script type="text/javascript" src="../js/jquery.js"></script>
    <style type="text/css">
    #lazyLoadImage img{ width:159px; height:71px; border:1px solid #CCCCCC; padding:3px; float:left; margin:10px; visibility:visible;opacity:0.00;filter:alpha(opacity=00);-moz-opacity:0.0;}
    </style>
 
<script>
function imgLazyLoad(){//扫描需要加载的div
 $.each($("img"),function(i,o){
  //获取窗口高
  var windowHeight=$(window).height();
  //获取滚动条
  var scrollTop=$(document).scrollTop();
  windowHeight=windowHeight; //可以设置滚动条在显示某个高度来lazyload windowHeight=windowHeight/2; 比如在显示屏幕高度2分之1的时候加载
 
 
  //先判断是否是加载完的图片 跳出
  if($(o).attr("src")==$(o).attr("pic")){
   return true;
  }else if( $(o).offset().top<=(scrollTop+windowHeight) && $(o).offset().top >= scrollTop ){//判断div是不是出在可见的位置
   if($(o).attr("pic") != undefined || $(o).attr("pic") != "undefined" ){
    var ObjectSrc = $(o).attr("pic");
    //把pic的值赋给src值
    $(o).attr("src",ObjectSrc);
    //css属性改为可见
    $(o).css("visibility","visible");
    //渐变时间和渐变值
    $(o).fadeTo(1000,1.00);
   }
  }
 });
}
$(function(){//页面第一次加载时
 imgLazyLoad();//初始化
 //判断浏览器
 if($.browser.msie){
  //IE浏览器
  $(window).scroll(imgLazyLoad);//浏览器的兼容
 }else {
  //其他浏览器 ff chrome 测试通过
  $(document).scroll(imgLazyLoad);//当滚动条滚动时,扫描需要加载的div
 }
 
 //$("body").scroll(imgLazyLoad);//浏览器的兼容 不清楚是哪款浏览器
});
</script>
<div id="lazyLoadImage">
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/><img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/><img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/><img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<img pic="http://www.wm18.com/data/afficheimg/1399340446955480883.jpg"/>
<div>